<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        ul li{
            list-style: none;
            display: inline-block;
            width:40px;
            height: 40px;
            border:1px solid gray;
            text-align: center;
            line-height: 40px;
        }
        .operation{
            display: flex;
        }
        select{
            width:100px;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="con"></div>
        <div class="operation">
            <span class="left-btn"><</span>
            <select class="select"></select>
            <ul class="page-nav"></ul>
            <span class="right-btn">></span>
        </div>
    </div>


    <script>

        let data = [];

        for(let i = 0;i<20;i++){
            data.push({title:`标题${i+1}`})
        }
        class Pagination{
            constructor(params){
                this.parent = this.getDom(params.el);
                this.lBtn = this.getDom('.left-btn',this.parent);
                this.rBtn = this.getDom('.right-btn',this.parent);
                this.select = this.getDom('.select',this.parent);
                this.nav = this.getDom('.page-nav',this.parent);
                this.con = this.getDom('.con',this.parent);

                this.data = params.data;

                this.pageLength = params.pageLength;

                this.cb1 = params.cb1;
                
                this.cb2 = params.cb2;

                this.init();

            }

            init(){
                this.limit = this.pageLength[0];
                this.pagenum = 1;
                this.renderselect();  
                this.renderNav();
                this.renderCon();
                this.addEvent();
                
            }

            addEvent(){
                this.lBtn.onclick = () => {
                    if(this.pagenum > 1){
                        this.pagenum--;
                        this.renderCon()
                    }
                }

                this.rBtn.onclick = () => {
                    console.log("=====",this.size)
                    if(this.pagenum < this.size){
                        this.pagenum++;
                        this.renderCon();
                    }
                }

                this.nav.onclick = (e) =>{
                    this.pagenum = e.target.innerHTML;
                    this.renderCon();
                    this.cb1();
                }

                this.select.onchange = () => {
                    this.limit = this.select.value;
                    this.renderNav();
                    this.renderCon();
                    this.cb2()
                }

            }

            renderCon(){
                let start = this.limit*(this.pagenum-1);
                let end = this.limit*this.pagenum;
                this.con.innerHTML = this.data.slice(start,end).map((item) => {
                    return `<p>${item.title}</p>`
                }).join('')
            }

            renderNav(){
                this.size = Math.ceil(this.data.length/this.select.value*1);
                this.con.innerHTML = '';
                this.nav.innerHTML = '';
                for(let i = 0;i<this.size;i++){
                    let li = document.createElement('li');
                    li.innerHTML = i+1;
                    this.nav.appendChild(li);
                }
            }

            renderselect(){
                this.select.innerHTML = this.pageLength.map((item) => {
                    return `
                        <option value=${item}>每页${item}条</opiton>
                    `
                }).join('')
            }

            getDom(ele,parent){
                return typeof ele === 'object' ? ele : (parent || document).querySelector(ele)
            }
        }

        let page = new Pagination(
            {
                el: '.wrap', //类挂在元素
                data,  //总数据
                pageLength:[5,10,15,20],  //每页显示的数据条数；（select框显示的数据）
                // cb1:function(){
                //     console.log("页码改变时触发")
                // },    //页码改变时触发
                // cb2:function(){
                //     console.log("select框中的每页展示条数改变时触发")
                // }     //select框中的每页展示条数改变时触发
            } 
        )

        // {
        //     title:'确定要删除吗？',
        //     btnArr:['确定','取消'],
        //     cb1:function(){

        //     },
        //     cb2:function(){

        //     }
        // }
    </script>
</body>
</html>